window.addEventListener('load', function () {
    const slide_nav = document.querySelector('.slide_nav')
    window.addEventListener('scroll', function () {
        if (document.documentElement.scrollTop > 80) {
            slide_nav.style.transform = 'translateY(80px)'
        } else {
            slide_nav.style.transform = 'translateY(-80px)'
        }
    })

    shoppingCarShow()
    // 当鼠标移入购物车时 调用购物车渲染函数
    const shoppingCarts = document.querySelectorAll('nav .w .shoppingCart')
    shoppingCarts[0].addEventListener('mouseenter', function () {
        shoppingCarShow()
        shoppingCarRender(JSON.parse(localStorage.getItem('goodsList')))
    })
    shoppingCarts[1].addEventListener('mouseenter', function () {
        shoppingCarShow()
        shoppingCarRender(JSON.parse(localStorage.getItem('goodsList')))
    })

    // 点击购物车实现页面跳转
    shoppingCarts[0].addEventListener('click', function (e) {
        if (e.target.parentNode.className === 'carTick' || e.target.parentNode.className === 'showNums') {
        location.href = '../html/shopping_car.html'
        }
    })
    shoppingCarts[1].addEventListener('click', function (e) {
        if (e.target.parentNode.className === 'carTick' || e.target.parentNode.className === 'showNums') {
        location.href = '../html/shopping_car.html'
        }
    })
    try {
        const btn = document.querySelector('.shoppingCart .down button')
        btn.addEventListener('click',e=>{
            location.href = '../html/shopping_car.html'
        })
    } catch (error) {
        
    }

    // 鼠标经过购物车让其显示
    const slide_bar = document.querySelector('nav .w .shoppingCart .slideBar')
    const goodsList = JSON.parse(localStorage.getItem('goodsList'))
    shoppingCarRender(goodsList)
    try {
        slide_bar.addEventListener('click',(e)=>{
            if(e.target.className==='del'){
                const newArr = JSON.parse(localStorage.getItem('goodsList'))
               newArr.splice(e.target.dataset.del,1)
               console.log(goodsList)
               localStorage.setItem('goodsList',JSON.stringify(newArr))
               shoppingCarShow()
               shoppingCarRender(newArr)
            }
        })
    } catch (error) {
        
    }
    

    // 获取ul使用事件委托
    const ul = document.querySelector('header ul')

    //获取本地存储中的账号并进行判断来实现相对应的结构
    if (localStorage.getItem('xtx-uname')) {
        ul.children[0].children[0].innerHTML = `<i class="iconfont icon-custom-user"></i>${localStorage.getItem('xtx-uname')}`
        ul.children[2].children[0].innerHTML = '退出登录'
    } else {
        ul.children[0].children[0].innerHTML = '请先登录'
        ul.children[2].children[0].innerHTML = '免费注册'
    }


    ul.addEventListener('click', (e) => {
        if (e.target.tagName === 'A') {
            if (e.target.innerHTML === '请先登录') {
                location.href = '../html/login.html'
            }
            if (e.target.innerHTML === '退出登录') {
                localStorage.removeItem('xtx-uname')
                location.href = '../html/login.html'
            }
        }
    })




});

// 实现购物车数量渲染
function shoppingCarShow(goodsList = JSON.parse(localStorage.getItem('goodsList'))) {
    let count = 0
    try {
        count = goodsList.reduce((prev, item) => {
            // 如果该元素的selected为true就加一否则就不加
            return item.selected ? prev + item.count * 1 : prev
        }, 0)
    } catch (error) {

    }
    const counts = document.querySelectorAll(' .w .shoppingCart .showNums i')
    counts[0].innerHTML = count
    counts[1].innerHTML = count
}

// 实现购物车下拉列表的渲染
function shoppingCarRender(arr) {
    const ulCar = document.querySelector('.shoppingCart .up ul')
    const str = arr.reduce((prev, item,index) => {
         return prev + `
     <li class="item" data-indexli='${index}'>
     <img src="${item.picture}"
         alt="">
     <div class="title">
         <p>${item.name}</p>
         <p>${item.attrsText}</p>
     </div>
     <div class="price">
         <p>￥${item.price}</p>
         <p>x${item.count}</p>
     </div>
     <div class="del" data-del='${index}'>
         X
     </div>
 </li>
     `
     }, '')
    try {
        ulCar.innerHTML= str
        const text = document.querySelector('.shoppingCart .text')
        const nums = document.querySelector('nav .w .shoppingCart .showNums i').innerHTML
        text.children[0].innerHTML=`共 ${nums} 件商品`
       //  计算总价
       const totalPrice = arr.reduce((prev,item)=> prev+(item.price*1)*(item.count*1),0)
       text.children[1].innerHTML=`￥${totalPrice.toFixed(2)}`
    } catch (error) {
        
    }

 }